<template>
  <div>
    <el-row :gutter="8" style="margin-bottom: 5px;">
      <el-col :span="19">
        <formColChiose
          v-model="colId"
          :disabled="disabled"
          :show-mode="[0]"
          :cur-item.sync="items"
          :form-id="limitFormId"
          :limit-table-id="tableId"
          :is-mulite="true"
          :is-sys-col="true"
        />
      </el-col>
      <el-col :span="4">
        <el-button :disabled="disabled" type="danger" @click="save(false)">覆盖</el-button>
        <el-button :disabled="disabled" type="primary" @click="save(true)">追加</el-button>
      </el-col>
    </el-row>
    <w-table
      :data="selectList"
      size="mini"
      :columns="columns"
      :is-paging="false"
    >
      <template slot="label" slot-scope="e">
        <el-input v-model="e.row.Label" :disabled="disabled" placeholder="字段标题" @change="saveRow(e.row)" />
      </template>
      <template slot="alias" slot-scope="e">
        <el-input v-model="e.row.Alias" :disabled="disabled" placeholder="字段别名(英文组成)" @change="saveRow(e.row)" />
      </template>
      <template slot="funcType" slot-scope="e">
        <enumItem
          v-model="e.row.FuncType"
          :disabled="disabled"
          :dic-key="EnumDic.PageFuncType"
          placeholder="函数类型"
          :multiple="false"
          sys-head="form"
          @change="saveRow(e.row)"
        />
      </template>
      <template slot="action" slot-scope="e">
        <el-button :disabled="disabled" type="danger" size="mini" icon="el-icon-delete" circle @click="drop(e.row)" />
      </template>
    </w-table>
  </div>
</template>

<script>
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import * as viewColApi from '@/customForm/api/formViewCol'
import { EnumDic } from '@/customForm/config/formConfig'
export default {
  components: {
    formColChiose
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    formId: {
      type: String,
      default: null
    },
    selects: {
      type: Array,
      default: null
    },
    limitFormId: {
      type: Array,
      default: null
    },
    tableId: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      EnumDic,
      selectList: [],
      colId: [],
      items: [],
      columns: [{
        key: 'Label',
        title: '字段标题',
        align: 'left',
        minWidth: 120,
        slotName: 'label'
      }, {
        key: 'Name',
        title: '字段名',
        align: 'left',
        minWidth: 120
      }, {
        key: 'Alias',
        title: '字段别名',
        align: 'left',
        minWidth: 120,
        slotName: 'alias'
      }, {
        key: 'FuncType',
        title: '函数类型',
        align: 'left',
        minWidth: 120,
        slotName: 'funcType'
      }, {
        key: 'Action',
        title: '操作',
        align: 'left',
        minWidth: 80,
        slotName: 'action'
      }]
    }
  },
  watch: {
    formId: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.selectList = []
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    async save(isAppend) {
      const list = await viewColApi.Sync({
        FormId: this.formId,
        IsAppend: isAppend,
        Cols: this.items.map(c => {
          return {
            ColumnId: c.Id,
            Alias: c.Name,
            Label: c.Label,
            FuncType: 0
          }
        })
      })
      this.colId = []
      if (isAppend) {
        this.selectList = this.selectList.concat(list)
      } else {
        this.selectList = list
      }
      this.refresh()
    },
    async drop(row) {
      await viewColApi.Delete(row.Id)
      this.selectList = this.selectList.filter(c => c.Id !== row.Id)
      this.refresh()
    },
    refresh() {
      this.$emit('update:selects', this.selectList)
    },
    async saveRow(row) {
      await viewColApi.Set(row.Id, {
        Alias: row.Alias,
        Label: row.Label,
        FuncType: row.FuncType
      })
      this.refresh()
    },
    async reset() {
      const list = await viewColApi.Gets(this.formId)
      this.selectList = list ?? []
      this.refresh()
    }
  }
}
</script>
